<!DOCTYPE html>
<html>

<head>
	<meta name="keywords" content="camicroscope, quip" />
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<meta name='viewport'
		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
	<!-- common -->
	<!-- <link rel='stylesheet' type='text/css' media='all' href='../css/style.css'/> -->
	<!-- Check If we're logged in ok, otherwise, log in for us -->
	<!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

	<script src='../common/authChecker.js'></script>
	<script>
		__auth_check(1)
	</script>

	<script src='../core/Store.js'></script>
	<script src='../common/util.js'></script>
	<script src='../common/ajv.js'></script>
	<script src='../components/loading/loading.js'></script>
	<script src="./loader/loader.js"></script>
	<script src="./loader/chunked_upload.js"></script>
	<title>CaMicroscope Data Table</title>

	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
		integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
		crossorigin="anonymous"></script>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
		integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="../common/stacktable.css">

	<!-- popup css -->
	<link rel="stylesheet" type="text/css" media="all" href="../../css/popup.css" />

	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
		}
	</style>
		<script src='../common/stacktable.js'></script>
	<link rel="stylesheet" href="./table.css" />
	<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
</head>

<body>
	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item link">
					<a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
				</li>
				<li class="nav-item active link">
					<a class="nav-link" href="table.html"> <i class="fas fa-list-ul"></i> Slides</a>
				</li>
				<!-- Notification Bell -->
				<li class="nav-item dropdown" id="notifBell">
					<a class="nav-link mt-1" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="fa fa-bell"></i>
						<span id="notification-nav-link"></span>
					</a>
					<ul class="dropdown-menu" id="dropNot">
						<li class="head text-light bg-dark">
							<div class="row">
							<div class="col-lg-12 col-sm-12 col-12 pl-4 pt-2">
								<h5>Notifications</h5>
							</div>
						</li>
						<li class="notification-box" id="notification-box">
							<div class="container-fluid">
								<ul id="tabs" class="nav nav-tabs" role="tablist">
								  <li class="nav-item">
									<a id="tab-delReq" href="#delReqTab" class="nav-link active" data-toggle="tab" role="tab">Delete Requests <span id="delReqBadge"></span></a>
								  </li>
								  <li class="nav-item">
									<a id="tab-userReq" href="#userReqTab" class="nav-link" data-toggle="tab" role="tab">User Requests <span id="userReqBadge"></span></a>
								  </li>
								</ul>
								<div id="content" class="tab-content mt-2" role="tablist">
								  <div id="delReqTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab-delReq">
									<div class="row">
										<div class="col-12 text-center text text-muted p-3">
											<i>No delete requests to show</i>
										</div>
									</div>
								  </div>
								  <div id="userReqTab" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-userReq">
									<div class="row">
										<div class="col-12 text-center text text-muted p-3">
											<i>No user registration requests to show</i>
										</div>
									</div>
								  </div>
								</div>
							  </div>
						</li>
					</ul>
				</li>
				<script>
					// To stop notification box from closing when clicked inside
					$(document).on('click', '#notification-box', function (e) {
						e.stopPropagation();
					});
				</script>
				<!-- Notification Bell Ends -->
			</ul>
			<ul class="navbar-nav">
				<li class="nav-item link" style="font-family: sans-serif;">
					<a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
				</li>
				<li class="nav-item link">
					<a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
				</li>
			</ul>
		</div>
	</nav>

	<div class="header text-center text-white bg-info p-4">
		<h1 class="h1">caMicroscope</h1>
		<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
		<div style="align-content: center;">
			<div style="align-content: center;">
				<div class="btn-group" role="group">
				<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark" title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button>
				<a href="./Info.html">	<button style="border-color: white; border-radius: 0 5px 5px 0;" type="button" class="btn btn-secondary bg-info text-light" title="Information Dashboard"><i class="fas fa-info-circle"></i>  Info</button> </a></div>
			</div>
		</div>
	</div>

	<div class='p-2 bg-light' style="flex-grow: 1;">
		<button type="button" class="btn btn-success float-right mb-2"
			onclick="(()=>{location.reload();return false;})()"> <i class="fas fa-sync-alt"></i> Reload</button>
			<div id="slideUploadButton" class="btn-group float-right mb-2 mr-2">
				<button type="button" class="btn btn-primary " data-toggle="modal"
			data-target="#upload-dialog" onclick="hidePostButton(); hideCheckButton(); resetUploadForm();" > <i class="fas fa-upload"></i> Upload</button>
				<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				  <span class="sr-only">Toggle Dropdown</span>
				</button>
				<div class="dropdown-menu" >
				  <a class="dropdown-item" href="../apps/batchloader/batchloader.html">Upload Batch</a>
				</div>
			</div>


			<div class="modal fade" id="upload-dialog" tabindex="-1" role="dialog"
			aria-labelledby="title-of-dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="title-of-dialog">Upload New Slide</h5>
						<button type="button" class="close" onclick="initialize();" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<div>
							<div id="upload_form">
								<div class="alert alert-info" role="alert">

									<h3>Steps for uploading.</h3>
									<ul>
										<li>Select the file as Input. The <b>Token</b> field should be filled automatically, and start uploading.</li>
										<li> Provide the destination filename with extension.</li>
										<li>Click on the <b>Finish Upload</b> to complete the upload </li>
										<li>Click on <b>Check</b> to get a preview of the slide  </li>
										<li>Finally <b>Post</b> it to caMicroscope</li>
									</ul>
								</div>
								<div>
									<form id="upload-form">
										<table class="table table-borderless" cellpadding="5" cellspacing="0">
											<tr>
												<td align="right"><b>File</b></td>
												<td id="fileUploadInput">
													<span class="input-group mb-3" >
														<span class="custom-file fileInputClass">
															<input type="file" class="custom-file-input" id="input" onchange="handleUpload(this.files)">
															<label class="custom-file-label" for="input" style="overflow: hidden;">Choose file</label>
														</span>
														<div class="form-group urlUploadClass" style="display:none; flex-wrap:wrap">
															<input type="url" placeholder="Enter file URL" class="form-control" id="urlInput" style="width: 20em;" required>
															<button type="button" class="btn btn-info" onclick="urlInputChange();" style="margin-left: 0.6em; margin-right:-5em" >Upload</button>
														</div>
													</span> <div id="uploadLoading" style="display: none;"><span>Uploading...</span> <br>
													<div class="spinner-grow text-primary" role="status" style="margin-left: 1.2em;">
														<span class="sr-only"></span>
													</div> </div>
													<a href="#" id='urlswitch' onclick="$('#urlInput').val(''); switchToUrl();" > <span style="position: absolute; right:2em;" > <i class="fas fa-link"></i> Upload from URL</span></a>
													<a href="#" style="display: none;" id="fileswitch" onclick=" switchToFile();" > <span style="position: absolute; right:2em;" > <i class="fas fa-folder"></i> Upload from local</span></a>

												</td>
											</tr>
											<tr id="filenameRow">
												<td align="right"><b>Filename</b></td>
											</tr>
											<tr id="tokenRow">
												<td align="right"><b>Token</b></td>
											</tr>
											<tr id="slidenameRow">
												<td align="right"><b>Slidename</b></td>
											</tr>
											<tr id="filterRow">
												<td align="right"><b>Filter (leave blank for public)</b></td>
											</tr>
										</table>

										<div class="text-center" id="controlButtons">
											<button class="btn btn-primary" type="button" id="finish_btn"
												value="Finish Upload" onclick="validateForm(finishUpload)">Finish
												Upload</button>
											<button class="btn btn-secondary" type="button" id="check_btn"
												value="Check" onclick="validateForm(CheckBtn);">Check</button>
											<button class="btn btn-success" type="button" id="post_btn" value="Post"
												onclick="validateForm(PostBtn)">Post</button>
										</div>

									</form>
								</div>
								<div class="text-center p-2">
									<div id="load_status" class="p-1"></div>
									<div id="json_table"></div>
								</div>
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" onclick="initialize();" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
			</div>
		<div class="container">

			<div>

				<div class="" >
					<h3 class="text-center h3 mb-0" >Available Slides</h3>
					<div class="search-box float-left form-group form-inline" style="margin-top: 1em;">
				</div>
				<div class="">
					<div class="row mt-2" id="filters-heading">
					</div>
					<div class="row mb-2 ml-1" id="filters-check" >
					</div>
					<div class="search-box float-left form-group form-inline">

						<select id='entries' class="select form-control mr-2">
							<option value="10" selected>10 slides/page</option>
							<option value="20">20 slides/page</option>
							<option value="40">40 slides/page</option>
							<option value="50">50 slides/page</option>
							<option value="100">100 slides/page</option>
						</select>
						<div class="form-group has-search">
							<span class="fa fa-search form-control-feedback"></span>
							<input id="search-table" type="text" class="form-control" placeholder="Search">
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<table id='datatables' class="table table-striped"></table>
				</div>
			</div>

		</div>

	</div>

	<!--Delete Modal -->
	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			<h5 class="modal-title" id="deleteModalLabel">Delete confirmation</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			</div>
			<div class="modal-body" id="confirmDeleteContent"></div>
			<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
			<button type="button" id='confirmDelete' data-dismiss="modal" class="btn btn-danger">Yes</button>
			</div>
		</div>
		</div>
	</div>


	<!--Slide Name change Modal -->
	<div class="modal fade" id="slideNameChangeModal" tabindex="-1" role="dialog" aria-labelledby="slideNameChangeModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			<h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirmation</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			</div>
			<form onsubmit="return false">
			<div class="modal-body" id="confirmUpdateSlideContent"></div>
			<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
			<button type="submit" id='confirmUpdateSlide'  class="btn btn-info">Update</button>
			</form>
			</div>
		</div>
		</div>
	</div>


	<div class="text-center text-white bg-dark p-3" style="position: static;bottom: 0;width: 100%;">
		<p class="p">Copyright © 2020 caMicroscope</p>
	</div>
	<!-- popup -->
	<div id="popup-container"></div>

</body>
<script src="./table.js">
</script>

</html>
